<script lang="ts" setup>
import type { Feedback01ComponentMeta } from '@/definitions/type'
import CompStyle from '@/components/CompAttr/CompStyle.vue'
import { useCompStyle } from '@/hooks/useCompStyle'
import { Checkbox, Input, RadioButton, RadioGroup, Space } from 'ant-design-vue'

defineOptions({
  name: 'Feedback01Attr',
  inheritAttrs: true,
})

const { activeRender } = useCompStyle<Feedback01ComponentMeta>()
</script>

<template>
  <div v-if="activeRender">
    <div class="mb-6">
      <div class="field-title">
        组件模板
      </div>
      <RadioGroup button-style="solid" :value="activeRender.config.template">
        <RadioButton v-for="item of activeRender.config.templateOptions" :key="item.value" :value="item.value">
          {{ item.label }}
        </RadioButton>
      </RadioGroup>
    </div>
    <div class="field-title">
      组件内容
    </div>
    <Space :size="20" direction="vertical" style="width: 100%;">
      <div class="field-control">
        <div class="field-label">
          留言标题
        </div>
        <Input
          v-model:value="activeRender.config.title" placeholder="请输入留言标题"
          :minlength="activeRender.config.titleRules?.min" :max-length="activeRender.config.titleRules?.max"
          :required="activeRender.config.titleRules?.required"
        />
      </div>
      <div class="field-control">
        <div class="field-label">
          留言引导
        </div>
        <Input
          v-model:value="activeRender.config.description" placeholder="请输入留言引导"
          :minlength="activeRender.config.descriptionRules?.min" :max-length="activeRender.config.descriptionRules?.max"
          :required="activeRender.config.descriptionRules?.required"
        />
      </div>
      <div class="field-control">
        <div class="field-label">
          按钮文案
        </div>
        <Input
          v-model:value="activeRender.config.buttonText" placeholder="请输入按钮文案"
          :minlength="activeRender.config.buttonTextRules?.min" :max-length="activeRender.config.buttonTextRules?.max"
          :required="activeRender.config.buttonTextRules?.required"
        />
      </div>
      <div class="field-control-row">
        <div class="field-label">
          留言内容
        </div>
        <div class="flex flex-col gap-14px">
          <Checkbox v-model:checked="activeRender.config.isShowUserName">
            <div class="flex flex-row gap-2 items-center">
              <span class="whitespace-nowrap">姓名</span>
              <Input
                v-model:value="activeRender.config.userName" placeholder="请输入您的姓名"
                :min-length="activeRender.config.userNameRules?.min"
                :max-length="activeRender.config.userNameRules?.max"
                :required="activeRender.config.userNameRules?.required"
              />
            </div>
          </Checkbox>

          <Checkbox v-model:checked="activeRender.config.isShowMobile">
            <div class="flex flex-row gap-2 items-center">
              <span class="whitespace-nowrap">手机</span>
              <Input
                v-model:value="activeRender.config.mobile" placeholder="请输入您的手机号"
                :min-length="activeRender.config.mobileRules?.min" :max-length="activeRender.config.mobileRules?.max"
                :required="activeRender.config.mobileRules?.required"
              />
            </div>
          </Checkbox>

          <Checkbox v-model:checked="activeRender.config.isShowArea">
            <div class="flex flex-row gap-2 items-center">
              <span class="whitespace-nowrap">地区</span>
              <Input
                v-model:value="activeRender.config.area" placeholder="请输入学习城市+区域"
                :min-length="activeRender.config.areaRules?.min" :max-length="activeRender.config.areaRules?.max"
                :required="activeRender.config.areaRules?.required"
              />
            </div>
          </Checkbox>

          <Checkbox v-model:checked="activeRender.config.isShowCourse">
            <div class="flex flex-row gap-2 items-center">
              <span class="whitespace-nowrap">课程</span>
              <Input
                v-model:value="activeRender.config.course" placeholder="请选择您的意向课程"
                :min-length="activeRender.config.courseRules?.min" :max-length="activeRender.config.courseRules?.max"
                :required="activeRender.config.courseRules?.required" style="width: 183px"
              />
            </div>
          </Checkbox>

          <Checkbox v-model:checked="activeRender.config.isShowRemark">
            <div class="flex flex-row gap-2 items-center">
              <span class="whitespace-nowrap">留言</span>
              <Input
                v-model:value="activeRender.config.remark" placeholder="请输入想说的话"
                :min-length="activeRender.config.remarkRules?.min" :max-length="activeRender.config.remarkRules?.max"
                :required="activeRender.config.remarkRules?.required"
              />
            </div>
          </Checkbox>
        </div>
      </div>
    </Space>
    <CompStyle />
  </div>
</template>

<style lang="less" scoped>
.field-title {
  color: var(--app-text-color-main);
  @apply font-bold text-sm mb-14px;
}

.field-control,
.field-control-row {
  color: var(--app-text-color-main);
  @apply flex gap-2;

  .field-label {
    color: var(--app-text-color-second);
    @apply text-sm;
  }
}

.field-control {
  @apply flex-col;
}

.field-control-row {
  @apply flex-row;
}
</style>
